<template>
  <div class="box">
    <div  class="box1" v-for="(item, index) in brr" :key="index">
        <p class="shijIian">{{item.tiem}}</p>
      <div class="box2" v-for="(items, index) in item.a"
      :key="index"
      >
        <div class="tubox">
          <img
            :src="items.img"
            alt=""
          />
        </div>
        <div class="tiebox">
          <div class="ti">{{items.nm}}</div>
          <div class="ren"><span>{{items.wish}}</span>人想看</div>
          <div class="yan">主演:{{items.star}}</div>
          <div class="time">{{items.rt}}</div>
        </div>
        <div class="presell" v-if="items.showStateButton">{{items.showStateButton.content}}</div>
        <div class="presellONE" v-if="!items.showStateButton">想看</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
    // props:{
    //     arr:[Array]
    // },
    data(){
        return{
            arr:null,
            brr:[],
            crr:[]
        }
    },
    methods:{
        // 待映列表数据
     async rm(){
       let re = await this.axios.get("https://apis.netstart.cn/maoyan/index/comingList?ci=1&limit=10").catch(err=>{
      console.log(err);
    })
    // console.log(re);
    // console.log(re.data.coming);
    this.arr = re.data.coming

    console.log(this.arr);
    this.arr.forEach(item => {
        let obj ={}
        obj.tiem = item.comingTitle
        obj.a=[]
            this.brr.push(obj)
            // console.log(item);
        //    if(item.comingTitle){

        //    }

    });
    
    console.log(this.brr);
        let obj ={}
          this.brr = this.brr.reduce(function(item, next) {
          obj[next.tiem] ? '' : obj[next.tiem] = true && item.push(next);
          return item;
          }, []);
          console.log(this.brr);
          this.brr.forEach((item,indexs)=>{
            //   console.log(item);
              this.arr.forEach((items,index)=>{
                  if(item.tiem == items.comingTitle){
                      
                      item.a.push(items)
                     
                  }
              })

          })
          console.log(this.brr);
          this.brr.forEach(item=>{
              console.log(item.tiem);
              console.log(item.a[0].showStateButton);
          })


//
//     
  

    

    
    
    },
       
    },
    created(){
        this.rm()
       

    }
}
</script>
<style lang="less" scoped>
.box {
  padding-bottom: 100px;
  .box1 {
    .shijIian{
      font-size: 15px;
      width: 100%;
      padding: 0 10px;
      box-sizing: border-box;
    }
    .box2 {
      padding: 10px;
      padding-right: 0;
      box-sizing: border-box;
      width: 100%;
      position: relative;
      display: flex;
      .presell {
        font-size: 10px;
          width: 30px;
          height: 18px;
          background-color: #3C9FE6;
          border-radius: 50px;
          text-align: center;
          line-height: 20px;
          color: white;
        position: absolute;
        right: 0;
        top: 30%;
      }
       .presellONE {
        font-size: 10px;
          width: 30px;
          height: 18px;
          background-color: #faaf00;
          border-radius: 50px;
          text-align: center;
          line-height: 20px;
          color: white;
        position: absolute;
        right: 0;
        top: 30%;
      }
      .tubox {
        width: 64px;
        height: 90px;
        img {
          width: 64px;
          height: 90px;
        }
      }
      .tiebox {
        padding-left: 10px;
        font-size: 15px;
        .ti {
          	white-space: nowrap;
            text-overflow: ellipsis;
          overflow: hidden;
          font-size: 17px;
          font-weight: 900;
          padding: 3px 0;
          color: black;
        }
        .ren {
          padding-bottom: 7px;
          font-size: 10px;
          color: #666;
          span {
            color: #faaf00;
            font-weight: 600;
          }
        }
        .yan {
          padding-bottom: 7px;
          font-size: 10px;
          color: #666;
          	white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .time {
          	white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          color: #666;
          font-size: 10px;
        }
      }
    }
  }
}
</style>